import React, { Component } from 'react';

import store from './store/index.js'
import {getMyListAction,changeInputAction,addItemAction,delItemAction} from './store/actionCreators'
import TodoListUi from './TodoListUi.js';
import axios from 'axios'
//import store from './store'

class TodoList extends Component {
    constructor(props) {
        super(props);
        console.log(store.getState())
        this.state = store.getState()
        this.changeInputValue = this.changeInputValue.bind(this)
        this.storeChange = this.storeChange.bind(this)
        this.clickBtn = this.clickBtn.bind(this)
        this.delItem = this.delItem.bind(this)
        //订阅模式
        store.subscribe(this.storeChange)

    }
    render() { 
        return ( 
           <TodoListUi
                inputValue={this.state.inputValue}
                changeInputValue = {this.changeInputValue}
                clickBtn = {this.clickBtn}
                list = {this.state.list}
                delItem = {this.delItem}
           />
         );
    }
    componentDidMount(){
        // const action = getTodoList()
        
        // store.dispatch(action)
        const action  = getMyListAction()
        store.dispatch(action)
        
    }
    changeInputValue(e){
        // const action = {
        //     type:CHANGE_INPUT,
        //     value:e.target.value
        // }
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }
    storeChange(){
        this.setState(store.getState())
    }
    clickBtn(){
        // const action ={
        //     type:ADD_ITEM,
        //     value:this.state.inputValue
        // }
        const action = addItemAction(this.state.inputValue)
        store.dispatch(action)
    }
    delItem(index){
        // const action={
        //     type:DEL_ITEM,
        //     value:index
        // }
        const action = delItemAction(index)
        store.dispatch(action)
    }
}
 
export default TodoList;
